<template>
    <section class="ld">
        <div class="goback">
            <div @click="goback">
                <img src="../../assets/other/gobackW.png" alt="">
                <span>
                    返回
                </span>
            </div>
        </div>
        <section class="_head">
            <span class="ledouNum">
                {{mAcount.zcjf || 0}}
            </span>
            <div class="useFund" @click="usePoints">立即使用</div>
        </section>
        <section class="record">
            积分记录
        </section>
        <!-- <dl class="record_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50" infinite-scroll-immediate-check="loading"> -->
        <dl class="record_list">
            <dd v-for="(acountlist,index) in acountlist" :key="index">
                <section class="record_left">
                    <span class="record_tit">
                        {{
                        acountlist.note
                        }}
                    </span>
                    <span class="record_time">
                        {{
                        acountlist.assessmentmonth | formatDate
                        }}
                    </span>
                </section>
                <section class="record_right">
                    <div>
                        <span>
                            {{
                            acountlist.type | judegAM
                            }}
                        </span>
                        <span class="money">
                            {{
                            acountlist.money / 100
                            }}
                        </span>
                    </div>
                    <div class="blankE">0</div>
                </section>
            </dd>
        </dl>
        <!-- 加载动画 -->
        <!-- <loadmore v-show="loadingDom"></loadmore> -->
    </section>
</template>
<script>
    import { getAccountAmount, getBBlRecord, getIntegralRecord } from '../../libs/interface'
    import loadmore from '../../components/loadmore'
    import { userInfoGet } from '../../libs/publicMethod'
    export default {
        components: { getAccountAmount, getBBlRecord, loadmore, userInfoGet, getIntegralRecord },
        data() {
            return {
                goName: '返回',
                mAcount: [], // 用户账户
                acountlist: [], // 乐豆使用记录
                loading: false, // 下拉
                loadingDom: false, // 下拉
                offset: 0, // 下拉加载条数
            }
        },
        mounted() {
            document.body.style.paddingBottom = '60px'
            // 获取用户积分
            let params = {
                memberid: userInfoGet().id
            }
            getAccountAmount(params, (data) => {
                if (data.code == 1) {
                    this.mAcount = data.payload
                } else {
                    this.$toast(data.msg)
                }
            })
            // 获取乐豆使用记录
            let paramsLd = {
                memberId: userInfoGet().id,
            }
            getIntegralRecord(paramsLd, (data) => {
                if (data.code == 1) {
                    this.acountlist = data.payload
                } else {
                    this.$toast(data.msg)
                }
            })
        },
        methods: {
            goback() {
                let vm = this
                // if (vm.URL) {
                    vm.$router.push('/my')
                // } else {
                    // vm.$router.back(-1)
                // }
            },
            usePoints () {
                this.$router.push('/mall')
            },
            // loadMore() {
            //     let vm = this
            //     vm.loading = true;
            //     vm.loadingDom = true;
            //     vm.offset = 10 + vm.offset;
            //     let params = {
            //         memberid: userInfoGet().id,
            //         offset: this.offset,
            //         limit: 10
            //     }
            //     getBBlRecord(params, (data) => {
            //         if (data.code == 1 && data.payload.length > 0) {
            //             // vm.acountlist = data.payload
            //             vm.$nextTick(() => {
            //                 data.payload.forEach((item) => {
            //                     vm.acountlist.push(item);
            //                 })
            //             })
            //             vm.loading = false;
            //         } else {
            //             this.loading = true;
            //             vm.offset -= 10;
            //             vm.$toast('暂未请求到数据,请稍后再试')
            //         }
            //         vm.loadingDom = false;
            //     })
            // }
        },
        filters: {
            judegAM(text) {
                if (text == 1 || text == 2 || text == 6 || text == 7 || text == 10 || text == 12 || text == 14 || text == 16 || text == 17 || text == 18 || text == 19 || text == 20) {
                    return '+'
                }
                return '-';
            },
            formatDate(input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            }
        }
    }
</script>
<style scoped>
    a {
        color: #333;
    }

    .ld {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    /* 返回 */
    .goback {
        padding: .5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        width: 100%;
        position: absolute;
        background: none;
        z-index: 1;
        color: white;
        box-sizing: border-box;
    }

    .goback img {
        padding-right: .5rem;
        height: 1rem;
    }

    .goback div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        align-items: center;
    }

    .goback section {
        font-size: 0.8rem;
        color: rgba(102, 102, 102, 1);
    }

    /* 头部 */
    ._head {
        width: 100%;
        height: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, rgba(215, 64, 64, 1) 0%, rgba(255, 114, 121, 1) 100%);
    }

    .ledouNum {
        font-size: 2rem;
        color: rgba(255, 255, 255, 1);
        text-shadow: 1px 2px 2px 2px rgba(215, 64, 64, 1);
        margin-bottom: .5rem;
    }

    .useFund {
        padding: .3rem 1rem;
        font-size: 1rem;
        border: none;
        background: rgba(255, 255, 255, 1);
        border-radius: 1rem;
        box-shadow: 0px 2px 0px 0px rgba(194, 52, 52, 1);
        outline: none;
        font-weight: bold;
        color: rgba(215, 64, 64, 1);
    }

    .recharge {
        padding: .3rem 1rem;
        font-size: 1rem;
        border: none;
        background: rgba(255, 255, 255, 1);
        border-radius: 1rem;
        box-shadow: 0px 2px 0px 0px rgba(194, 52, 52, 1);
        outline: none;
        font-weight: bold;
        color: rgba(215, 64, 64, 1);
    }

    .record {
        padding: .5rem;
        text-align: left;
        font-size: .8rem;
        background: white;
        margin-bottom: .2rem;
    }

    /* 记录列表 */
    .record_list dd {
        padding: .8rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: white;
    }

    .record_left {
        display: flex;
        width: 80%;
        flex-direction: column;
        justify-content: space-between;
        align-items: left;
    }

    .record_left .record_tit {
        font-size: 1rem;
        font-weight: bold;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }

    .record_left .record_time {
        font-size: .8rem;
        color: #999;
    }

    .record_time {
        margin-top: .2rem;
    }

    .record_right {
        font-size: 1rem;
        font-weight: bold;
    }

    .blankE {
        color: rgba(0, 0, 0, 0)
    }
</style>